<!--
 * @Author: luthor luthor-li@qq.com
 * @Date: 2024-02-21 19:38:25
 * @LastEditors: fisher luthor-li@qq.com
 * @LastEditTime: 2024-11-01 11:08:29
 * @FilePath: \allfront\src\modules\cloud\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="cloud_container">
    <Menu @changeMenu="changeMenu"></Menu>
    <component :is="currentComponent" class="cloud_main" />
  </div>
</template>

<script setup>
import { shallowRef } from 'vue';
import Menu from './menu/index.vue';
// import serviceInfo from './serviceInfo/index.vue';
import enginManager from './enginManager/index.vue';
import instance from './instance/index.vue';
import cluster from './cluster/index.vue';
// import projManager from './projManager/index.vue';
const compMap = shallowRef({
  // 1: serviceInfo,
  2: cluster,
  3: enginManager,
  4: instance,
  // 6: projManager,
});
let currentComponent = shallowRef(compMap.value['4']);
const changeMenu = menu => {
  currentComponent.value = compMap.value[menu];
};
</script>
<style scoped>
.cloud_container {
  width: 100vw;
  height: 100vh;
  display: flex;
}
.cloud_main {
  width: calc(100% - 200px);
  height: 100%;
}
</style>
